﻿<div id="{{type+getId()}}" ng-controller="dateValidator">
    <div class="form-group" ng-class="{'has-error': hasError}">
        <div class="col-xs-12">
            <label ng-class="{'error help-block': hasError}">Name <span ng-show="hasError">mustn't match or be empty.</span></label>
            <span class="k-widget k-autocomplete k-header k-input k-state-default">
                <input type="text" kendo-auto-complete class="k-input" k-options="autocomplete" onClick="this.select();" ng-model="temp.name" ng-blur="setPreviousName()" tabindex="100"
                       id="{{'name'+type+getId()}}" ng-change="changeSelected(); updateCalc(data[getParent()], data); getData()" ng-disabled="data.length == 0" />
                <span class="k-icon k-loading" ng-style="currStyle"></span>
            </span>
        </div>
    </div>
    <div class="form-group">
        <div class="col-xs-12">
            <label>Zone: {{data[getParent()].Zone}}</label>
        </div>
    </div>
    <div class="form-group" ng-init="updateCalc(data[getParent()], data)">
        <div class="col-xs-4">
            <select class="form-control" ng-model="temp.ETAMarker" tabindex="100"
                ng-change="changeMarker('ETAMarker', temp.ETAMarker);checkMarkerTime();
                     updateCalc(data[getParent()], data)"
                ng-disabled="data.length == 0">
                <option>ETA</option>
                <option>NOR</option>
                <option>NOR+6h</option>
            </select>
        </div>
        <div class="col-xs-8">
            <span class="k-widget k-datetimepicker k-header k-input">
                <span class="k-picker-wrap" ng-class="{'k-state-enabled' : data.length > 0, 'k-state-disabled' : data.length == 0}">
                    <input kendo-date-time-picker type="text" class="k-input" placeholder="Enter date and time" k-ng-model="temp.ETA_NORTime" ng-model="str.ETA_NORTime" name="{{'ETA_NORTime'+type+getId()}}" id="ETA_NORTime"
                        ng-init="str.ETA_NORTime = getDateTimeString(data[getParent()].ETA_NORTime);" k-parse-formats="formatsDateTime" k-format="formatDateTime" tabindex="100"
                        ng-blur="data[getParent()].ETA_NORTime=checkOldMatch(str.ETA_NORTime, data[getParent()].ETA_NORTime);
                        reset('ETA_NORTime'+type+getId(), data[getParent()].ETA_NORTime, getId()); updateCalc(data[getParent()], data)"
                        k-on-close="data[getParent()].ETA_NORTime=checkOldMatch(str.ETA_NORTime, data[getParent()].ETA_NORTime)" ng-disabled="data.length == 0" />
                    <span unselectable="on" class="k-select">
                        <span unselectable="on" class="k-icon k-i-calendar" role="button">select</span>
                        <span unselectable="on" class="k-icon k-i-clock" role="button">select</span>
                        <span unselectable="on" class="k-icon k-i-close" role="button" ng-hide="data.length == 0"
                            ng-click="data[getParent()].ETA_NORTime=clearDate();str.ETA_NORTime=clearDate();
                            reset('ETA_NORTime'+type+getId(), data[getParent()].ETA_NORTime, getId());updateCalc(data[getParent()], data)">select</span>
                    </span>
                </span>
            </span>
        </div>
    </div>
    <div class="form-group">
        <div class="col-xs-4">
            <select class="form-control" ng-model="temp.AAMarker" tabindex="-1" ng-keydown="changeSelectionPort($event, 'must')"
                ng-change="changeMarker('AAMarker', temp.AAMarker); data[getParent()].AAMarker=temp.AAMarker;
                     updateCalc(data[getParent()], data)"
                ng-disabled="data.length == 0">
                <option>Anchor aweigh</option>
            </select>
        </div>
        <div class="col-xs-8">
            <span class="k-widget k-datetimepicker k-header k-input">
                <span class="k-picker-wrap" ng-class="{'k-state-enabled' : data.length > 0, 'k-state-disabled' : data.length == 0}">
                    <input kendo-date-time-picker type="text" class="k-input" placeholder="Enter date and time" k-ng-model="temp.AATime" ng-model="str.AATime" id="AATime" name="{{'AATime'+type+getId()}}"
                        ng-init="str.AATime = getDateTimeString(data[getParent()].AATime);" k-parse-formats="formatsDateTime" k-format="formatDateTime" tabindex="-1"
                        ng-blur="data[getParent()].AATime=checkOldMatch(str.AATime, data[getParent()].AATime); 
                        reset('AATime'+type+getId(), data[getParent()].AATime, getId());updateCalc(data[getParent()], data)" ng-keydown="changeSelectionPort($event, 'must')"
                        k-on-close="data[getParent()].AATime=checkOldMatch(str.AATime, data[getParent()].AATime)" ng-disabled="data.length == 0" />
                    <span unselectable="on" class="k-select">
                        <span unselectable="on" class="k-icon k-i-calendar" role="button">select</span>
                        <span unselectable="on" class="k-icon k-i-clock" role="button">select</span>
                        <span unselectable="on" class="k-icon k-i-close" role="button" ng-hide="data.length == 0"
                            ng-click="data[getParent()].AATime=clearDate();str.AATime=clearDate();
                            reset('AATime'+type+getId(), data[getParent()].AATime, getId());updateCalc(data[getParent()], data)">select</span></span>
                </span>
            </span>
        </div>
    </div>
    <div class="form-group">
        <div class="col-xs-4">
            <select class="form-control" ng-model="temp.ETBMarker" tabindex="100"
                ng-change="changeMarker('ETBMarker', temp.ETBMarker); data[getParent()].ETBMarker=temp.ETBMarker;
                    updateCalc(data[getParent()], data)"
                ng-disabled="data.length == 0">
                <option>ETB</option>
                <option>ATB</option>
            </select>
        </div>
        <div class="col-xs-8">
            <span class="k-widget k-datetimepicker k-header k-input">
                <span class="k-picker-wrap" ng-class="{'k-state-enabled' : data.length > 0, 'k-state-disabled' : data.length == 0}">
                    <input kendo-date-time-picker type="text" class="k-input" placeholder="Enter date and time" k-ng-model="temp.ETB_ATBTime" ng-model="str.ETB_ATBTime" id="ETB_ATBTime" name="{{'ETB_ATBTime'+type+getId()}}"
                        ng-init="str.ETB_ATBTime = getDateTimeString(data[getParent()].ETB_ATBTime);" k-parse-formats="formatsDateTime" k-format="formatDateTime" tabindex="100"
                        ng-blur="data[getParent()].ETB_ATBTime=checkOldMatch(str.ETB_ATBTime,data[getParent()].ETB_ATBTime);
                        reset('ETB_ATBTime'+type+getId() ,data[getParent()].ETB_ATBTime, getId());updateCalc(data[getParent()], data)"
                        k-on-close="data[getParent()].ETB_ATBTime=checkOldMatch(str.ETB_ATBTime,data[getParent()].ETB_ATBTime)" ng-disabled="data.length == 0" />
                    <span unselectable="on" class="k-select">
                        <span unselectable="on" class="k-icon k-i-calendar" role="button">select</span>
                        <span unselectable="on" class="k-icon k-i-clock" role="button">select</span>
                        <span unselectable="on" class="k-icon k-i-close" role="button" ng-hide="data.length == 0"
                            ng-click="data[getParent()].ETB_ATBTime=clearDate();str.ETB_ATBTime=clearDate();
                            reset('ETB_ATBTime'+type+getId() ,data[getParent()].ETB_ATBTime, getId());updateCalc(data[getParent()], data)">select</span></span>
                </span>
            </span>
        </div>
    </div>
    <div class="form-group">
        <div class="col-xs-4">
            <select class="form-control" ng-model="temp.ETDMarker" tabindex="100"
                ng-change="changeMarker('ETDMarker', temp.ETDMarker); data[getParent()].ETDMarker=temp.ETDMarker;
                     updateCalc(data[getParent()], data)"
                ng-disabled="data.length == 0">
                <option>ETD</option>
                <option>HD</option>
            </select>
        </div>
        <div class="col-xs-8">
            <span class="k-widget k-datetimepicker k-header k-input">
                <span class="k-picker-wrap" ng-class="{'k-state-enabled' : data.length > 0, 'k-state-disabled' : data.length == 0}">
                    <input kendo-date-time-picker type="text" class="k-input" placeholder="Enter date and time" k-ng-model="temp.ETD_ATDTime" ng-model="str.ETD_ATDTime" id="ETD_ATDTime" name="{{'ETD_ATDTime'+type+getId()}}"
                        ng-init="str.ETD_ATDTime = getDateTimeString(data[getParent()].ETD_ATDTime);" k-parse-formats="formatsDateTime" k-format="formatDateTime" tabindex="100"
                        ng-blur="data[getParent()].ETD_ATDTime=checkOldMatch(str.ETD_ATDTime, data[getParent()].ETD_ATDTime);
                        reset('ETD_ATDTime'+type+getId(), data[getParent()].ETD_ATDTime, getId());updateCalc(data[getParent()], data)" 
                        k-on-close="data[getParent()].ETD_ATDTime=checkOldMatch(str.ETD_ATDTime, data[getParent()].ETD_ATDTime)" ng-disabled="data.length == 0" />
                    <span unselectable="on" class="k-select">
                        <span unselectable="on" class="k-icon k-i-calendar" role="button">select</span>
                        <span unselectable="on" class="k-icon k-i-clock" role="button">select</span>
                        <span unselectable="on" class="k-icon k-i-close" role="button" ng-hide="data.length == 0"
                            ng-click="data[getParent()].ETD_ATDTime=clearDate();str.ETD_ATDTime=clearDate();
                            reset('ETD_ATDTime'+type+getId(), data[getParent()].ETD_ATDTime, getId());updateCalc(data[getParent()], data)">select</span></span>
                </span>
            </span>
        </div>
    </div>
    <div class="form-group">
        <div class="col-xs-4">
            <select class="form-control" ng-model="temp.ETCMarker" tabindex="-1" ng-keydown="changeSelectionPort($event, 'must')"
                ng-change="changeMarker('ETCMarker', temp.ETCMarker); data[getParent()].ETCMarker=temp.ETCMarker;
                     updateCalc(data[getParent()], data)"
                ng-disabled="data.length == 0">
                <option>ETC</option>
                <option>SLD</option>
            </select>
        </div>
        <div class="col-xs-8">
            <span class="k-widget k-datetimepicker k-header k-input">
                <span class="k-picker-wrap" ng-class="{'k-state-enabled' : data.length > 0, 'k-state-disabled' : data.length == 0}">
                    <input kendo-date-time-picker type="text" class="k-input" placeholder="Enter date and time" k-ng-model="temp.SldDate" ng-model="str.SldDate" id="SldDate" name="{{'SldDate'+type+getId()}}" 
                        ng-init="str.SldDate = getDateTimeString(data[getParent()].SldDate)" k-parse-formats="formatsDateTime" k-format="formatDateTime" tabindex="-1" ng-keydown="changeSelectionPort($event, 'must')"
                        ng-blur="data[getParent()].SldDate=checkOldMatch(str.SldDate, data[getParent()].SldDate); reset('SldDate'+type+getId(), data[getParent()].SldDate, getId());updateCalc(data[getParent()], data)"
                        k-on-close="data[getParent()].SldDate=checkOldMatch(str.SldDate, data[getParent()].SldDate)" ng-disabled="data.length == 0" />
                    <span unselectable="on" class="k-select">
                        <span unselectable="on" class="k-icon k-i-calendar" role="button">select</span>
                        <span unselectable="on" class="k-icon k-i-clock" role="button">select</span>
                        <span unselectable="on" class="k-icon k-i-close" role="button" ng-hide="data.length == 0"
                            ng-click="data[getParent()].SldDate=clearDate();str.SldDate=clearDate();
                            reset('SldDate'+type+getId(), data[getParent()].SldDate, getId());updateCalc(data[getParent()], data)">select</span></span>
                </span>
            </span>
        </div>
    </div>
</div>
